{% extends "common/map.html" %}

{# {% block headtwo %} #}
{# {% if user.is_authenticated %} #}
{#  #}
{# {% else %} #}
{#         <style type="text/css" media="screen"> #}
{#             #header_buttons { #}
{#                 position:absolute; #}
{#                 left:453px; #}
{#                 top:0px; #}
{#             }         #}
{#         </style> #}
{# {% endif %} #}
{# {% endblock headtwo %} #}

{% block layersConfig %}
// setup which kml files are shown in the data layers panel
{% if user.is_authenticated %}
    lingcod.addLayer('{% url public-data-layers %}', {showDownloadLink:true});            
{% else %}
    $(lingcod).bind('earthReady', function(e, ge, gex){
        var tree = kmltree({
            url: '{% url public-data-layers %}',
            gex: gex,
            mapElement: $('#map'),
            element: $('#datalayerstreesidebar'),
            restoreState: !$.browser.msie,
            setExtent: false,
        });
        tree.load();
    });
{% endif %}
lingcod.addLayer('{% url studyregion-kml %}', {setExtent: true});
{% endblock layersConfig %}

{% block myshapes %}
    var add_to_array = "{% url array-add-mpa 999999999999999 %}";
    var remove_mpa = "{% url array-remove-mpa 999999999999999 %}"
    var getId = function(node, editor){
        var kmlObject;
        kmlObject = editor.tree.getNetworkLink(node);
        if(!kmlObject){
            kmlObject = editor.tree.lookup(node);
        }
        return kmldom(kmlObject.getKml()).find('[nodeName=atom:link][rel=self]').attr('mm:pk');
    };
    
    var getLocation = function(node, editor){
        var kmlObject;
        kmlObject = editor.tree.getNetworkLink(node);
        if(!kmlObject){
            kmlObject = editor.tree.lookup(node);
        }
        var self = kmldom(kmlObject.getKml()).find('[nodeName=atom:link][rel=self]');
        return self.attr('href');
    }
    
    var dragDropCallback = function(array_location, mpa_location, editor){
        editor.refresh(function(){
            if(array_location){
                var array_node = editor.tree.getNodesById(array_location);
                if(array_node.hasClass('loaded')){
                    var mpa_node = editor.tree.getNodesById(mpa_location);
                    editor.tree.selectNode(
                        mpa_node, 
                        editor.tree.lookup(mpa_node)
                    );
                }else{
                    $(array_node).bind('loaded', function(e, node, kmlObject){
                        var mpa_node = editor.tree.getNodesById(mpa_location);
                        editor.tree.selectNode(
                            mpa_node, 
                            editor.tree.lookup(mpa_node)
                        );
                    });
                    editor.tree.openNetworkLink(array_node);
                }
            }else{
                var node = editor.tree.getNodesById(mpa_location);
                editor.tree.selectNode(node, editor.tree.lookup(node));                
            }
        });
    }
    
    var setupDragDrop = function(editor, list, kmlObject){
        $(editor.tree).bind('networklinkload', function(e, node, kmlObject){
            enableDragDrop(editor, node, kmlObject);
        });
        enableDragDrop(editor, list, kmlObject);
    }
    
    var enableDragDrop = function(editor, list, kmlObject){
        list.find('li.aoi_aoi').draggable({scope:'aoi_aoi', containment: editor.el, scroll:true, revert:'invalid', handle: 'span.name, span.icon', delay: 150, scroll: true});
        list.find('li.aoi_aoifolder').droppable({scope:'aoi_aoi', activeClass: '.ui-state-highlight', hoverClass: 'drophover', tolerance: 'pointer', drop: function(event, ui){
            var array = event.target;
            var array_pk = getId(array, editor);
            var mpa = ui.draggable[0];
            var mpa_pk = getId(mpa, editor);
            if($(mpa).parent().parent()[0] === array){
                $(mpa).css({left: 0, top: 0});
                return false;
            }
            array_location = getLocation(array, editor);
            mpa_location = getLocation(mpa, editor);
            editor.el.find('li.aoi_aoifolder').droppable('destroy');
            $.ajax({
                type: 'POST',
                url: add_to_array.replace('999999999999999', array_pk),
                data: {mpa_id: mpa_pk},
                success: function(){
                    dragDropCallback(array_location, mpa_location, editor);
                },
                error: function(){
                    alert('could not assign mpa to array due to a server error.');
                    editor.refresh();
                }
            });
        }});
        
        editor.el.find('li span.name:contains(Annotations)').parent().droppable({scope:'aoi_aoi', activeClass: '.ui-state-highlight', hoverClass: 'drophover', tolerance: 'pointer', drop: function(event, ui){
            // var array = event.target;
            // var array_pk = getId(array, editor);
            var mpa = ui.draggable[0];
            var mpa_pk = getId(mpa, editor);
            if($(mpa).parent().parent()[0] === this){
                $(mpa).css({left: 0, top: 0});
                return false;
            }
            var mpa_location = getLocation($(mpa), editor);
            var array_pk = getId($(mpa).parent().parent(), editor);            
            editor.el.find('li.aoi_aoifolder').droppable('destroy');
            $(this).droppable('destroy');
            $.ajax({
                type: 'POST',
                url: remove_mpa.replace('999999999999999', array_pk),
                data: {mpa_id: mpa_pk},
                success: function(){
                    dragDropCallback(null, mpa_location, editor);
                },
                error: function(){
                    alert('could not remove mpa from array due to a server error.');
                    editor.refresh();
                }
            });
        }});
        
    };
    {% if user.is_authenticated %}
        options.myshapes = [{url: "{% url kmlapp-userlinks-kmz input_username=user.username session_key=session_key %}", callback: setupDragDrop}];
    {% else %}
    {% endif %}
{% endblock myshapes %}

{% block headtwo %}
    <style type="text/css" media="screen">
        #SharedShapes .kmltree-title {
            display:none;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $('#sidebar').tabs('select', '#MyShapes');
        });
    </script>
    <link rel="stylesheet" href="http://kmltree.googlecode.com/hg/dist/kmltree.css" type="text/css" media="screen" title="no title" charset="utf-8">
{% endblock headtwo %}

{% block metanavigation %}
{% if user.is_authenticated %}
<li>{{user.username}} | </li>
{% endif %}
<li><a href="#" id="about">about marinemap</a> | </li>
{% block meta_navigation_list_insert %}{% endblock %}
{% if user.is_authenticated %}
<li><a href="{% url user_profile-form user.username %}">my profile</a> | </li>
<li><a href="{% url auth_logout %}">sign out</a></li>
{% else %}
<li><a href="{% url registration_register %}">register</a> | </li>
<li><a href="{% url auth_login %}">sign in</a></li>
{% endif %}                
{% endblock metanavigation %}


{% block tabs %}
{% if user.is_authenticated %}
<li><a href="#MyShapes"><span>My Annotations</span></a></li>                
{% endif %}
<li><a href="#SharedShapes"><span>{% if user.is_authenticated %}{% if member_of_sharing_group %}Shared With Me{% else %}Sharing{% endif%}{% else %}Data Layers{% endif %}</span></a></li>
{% endblock tabs %}

{% block tabscontents %}
{% if user.is_authenticated %}
<div id="MyShapes">
    <p>Use these tools to make Annotations on the map that will be stored in
    your account. Other data layers can be viewed using the layers button in the blue toolbar.</p>
    
    <div style="font-size:1em;" id="myshapestree"></div>
</div>            
{% endif %}
<div id="SharedShapes">
    {% if user.is_authenticated %}
    {% else %}
        {# <p>To draw and share your own, <a href="/accounts/register/">register for an account</a>.</p> #}
        <p class="download_layer" style="margin-left:10px;"><a href="{% url public-data-layers %}">Download this layer</a> for use in Google Earth or your own website.</p>
        <div id="datalayerstreesidebar"></div>
    {% endif %}
    {% if member_of_sharing_group %}
      <div style="font-size:1em;" id="sharedshapestree"></div>
    {% else %}
        {% if user.is_authenticated %}
            <p>You can use MarineMap to share information related to the spill with a user group that we can setup for you.</p><p> Send your request to <a href="mailto:gulfspill-groups@marinemap.org?subject=group request">gulfspill-groups@marinemap.org</a>.</p>            
        {% endif %}
    {% endif %}

</div>            
{% endblock tabscontents %}

{# {% block header_buttons %} #}
{# {# {% if user.is_authenticated %} #} #}
{# <li class="divider"><img src="{{MEDIA_URL}}/common/images/header_divider.gif" height="32" width="2" /></li> #}
{# <li id="layers_menu" class="item"> #}
{#     <span> #}
{#         <a title="Data Layers" href="#DataLayers"><img src="{{MEDIA_URL}}/common/images/transparent.gif" width="44" height="48" /></a> #}
{#     </span> #}
{# </li> #}
{# {# {% endif %} #} #}
{# <li class="divider"><img src="{{MEDIA_URL}}/common/images/header_divider.gif" height="32" width="2" /></li> #}
{# <li id="tools_menu" class="item autosize"> #}
{#     <span> #}
{#         <a title="Tools" href="#tools"><img src="{{MEDIA_URL}}/common/images/transparent.gif" width="44" height="48" /></a> #}
{#     </span> #}
{# </li> #}
{# <li class="divider"><img src="{{MEDIA_URL}}/common/images/header_divider.gif" height="32" width="2" /></li>             #}
{# {% endblock header_buttons %} #}

{% block dataLayersTitle %}{% if user.is_authenticated %}Data Layers{% else %}Other Layers{% endif %}{% endblock dataLayersTitle %}